import * as echarts from "echarts";

// 使用类生成柱状图的基础配置项
export class BarBaseOptions {
  static styleCollecte = {
    barWidth: '40%', // 柱子宽度
    itemStyle: {
      color: function (params) {
        // 根据索引设置不同的颜色
        var colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#FFCD56'];
        return colors[params.dataIndex % colors.length];
      }
    },
    emphasis: { // 鼠标悬停时的样式
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
  };
  constructor(XData, series, title = "动态柱状图示例", legend) {

    this.options = {
      title: {
        text: title,
        left: 'center',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: '#333'
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(0, 0, 0, 0.1)'
          },
          crossStyle: {
            color: 'rgba(0, 0, 0, 0.3)'
          }
        },
        // formatter: '{b}: {c}',  // 提示框格式
        formatter: function (params) {
          // params 是一个数组，每个数组项对应一个系列的数据
          let tooltipContent = params[0].name + '<br>'; // 显示 X 轴的类别名
          params.forEach(item => {
            tooltipContent += `${item.seriesName}: ${item.value}<br>`; // 显示每个系列的名称和值
          });
          return tooltipContent; // 返回拼接好的提示框内容
        },
        backgroundColor: 'rgba(0,0,0,0.7)', // 背景颜色
        borderColor: '#fff', // 边框颜色
        textStyle: {
          color: '#fff', // 文本颜色
          fontSize: 14 // 字体大小
        }
      },
      legend: {
        right: '10%',  // 图例位置
        ...legend
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: XData || ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 14
        }
      },
      yAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 14
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.1)'
            }
          }
        },
      ],
      series: (series || []).map(item => {
        return {
          name: item.name,
          type: 'bar',
          data: item.data,
          ...BarBaseOptions.styleCollecte,
        };
      }),
      animation: {
        duration: 1000,
        easing: 'elasticOut'
      }, // 动画效果
    };
  }
}

// 使用类生成折线图的基础配置项
export class LineBaseOptions {
  static styleCollecte = {
    symbol: 'circle', // 数据点的形状
    symbolSize: 4, // 数据点的大小
    lineStyle: {
      width: 1, // 线条宽度
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#ff0000' },  // 渐变起始颜色（红色）
        { offset: 1, color: '#0000ff' }   // 渐变结束颜色（蓝色）
      ])
    },
    itemStyle: {
      color: 'rgb(143, 197, 233)' // 数据点颜色
    },
    areaStyle: {
      color: 'rgb(98, 191, 245, 0.1)', // 区域填充颜色 75, 192, 192
    }, // 区域填充颜色  rgba(98, 191, 245, 0.3)
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
      }
    } // 鼠标悬停时的样式
  };

  constructor(XData, series, title = "动态折线图示例", legend) {
    this.options = {
      title: {
        text: title,
        left: 'center',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: '#333'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line', // 使用直线指示器
          lineStyle: {
            color: '#333',
            width: 1
          }
        },
        formatter: function (params) {
          let tooltipContent = params[0].name + '<br>';
          params.forEach(item => {
            tooltipContent += `${item.seriesName}: ${item.value}<br>`;
          });
          return tooltipContent;
        }
      },
      legend: {
        right: '10%',  // 图例位置
        ...legend
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: ['5%', '5%'], // 在 X 轴两端留出 5% 的空白
        data: XData,
        axisLine: {
          lineStyle: {
            color: '#bd34fe'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 14,
          // rotate: -15, // 旋转45度
          boundaryGap: [false, true]  // 右侧留白
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 14
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0.1)'
          }
        }
      },
      series: (series || []).map(item => {
        return {
          name: item.name,
          data: item.data,
          type: 'line',
          ...LineBaseOptions.styleCollecte, // 样式
        };
      }),
      animation: {
        duration: 1000,
        easing: 'elasticOut'
      }, // 动画效果
    }; // 动态更新数据
  }
}

// 使用类生成饼图的基础配置项
export class PieBaseOptions {
  static styleCollecte = {
    center: ['55%', '55%'], // 默认居中
    radius: ['40%', '60%'], // 默认内半径为0，外半径为50%
    avoidLabelOverlap: false,
    label: {
      show: true,
      position: 'outside', // outside center
      formatter: '{b}: {d}%' // 标签内容格式器
    },
    emphasis: {
      label: {
        show: true,
        fontSize: '16',
        fontWeight: 'bold'
      },
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
    labelLine: {
      show: true
    },
    itemStyle: {
      borderRadius: 10, // 圆角
      borderColor: '#fff', // 边框颜色
      borderWidth: 2 // 边框宽度
    }
  };
  constructor(data, title = "动态饼状图示例", legend) {
    this.options = {
      title: {
        text: title,
        left: 'center',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: '#333'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        ...legend
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          data: data.map(item => {
            return {
              value: item.value,
              name: item.name
            };
          }),
          ...PieBaseOptions.styleCollecte, // 样式
        }
      ],
      animation: {
        duration: 1000,
        easing: 'elasticOut'
      }, // 动画效果
    };
  }
}


// 柱状图的基础默认配置项
export const barBaseOptions = {
  title: {
    text: '动态柱状图示例',
    left: 'center',
    textStyle: {
      fontSize: 20,
      fontWeight: 'bold',
      color: '#333'
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0, 0, 0, 0.1)'
      }
    },
    // formatter: '{b}: {c}',  // 提示框格式
    formatter: function (params) {
      // params 是一个数组，每个数组项对应一个系列的数据
      let tooltipContent = params[0].name + '<br>'; // 显示 X 轴的类别名
      params.forEach(item => {
        tooltipContent += `${item.seriesName}: ${item.value}<br>`; // 显示每个系列的名称和值
      });
      return tooltipContent; // 返回拼接好的提示框内容
    },
    backgroundColor: 'rgba(0,0,0,0.7)', // 背景颜色
    borderColor: '#fff', // 边框颜色
    textStyle: {
      color: '#fff', // 文本颜色
      fontSize: 14 // 字体大小
    }
  },
  legend: {
    data: ['销量'],
    right: '10%'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLine: {
      lineStyle: {
        color: '#999'
      }
    },
    axisLabel: {
      color: '#666',
      fontSize: 14
    }
  },
  yAxis: [
    {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 14
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 0, 0, 0.1)'
        }
      }
    },
  ],
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [10, 20, 30, 40, 50, 60, 70],
      barWidth: '40%', // 柱子宽度
      itemStyle: {
        color: function (params) {
          // 根据索引设置不同的颜色
          var colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#FFCD56'];
          return colors[params.dataIndex % colors.length];
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: true,
        formatter: '{b}: {d}%'  // 显示百分比
      },
    },
  ],
  animation: {
    duration: 1000,
    easing: 'elasticOut'
  }, // 动画效果
};

// 折线图的基础默认配置项
export const lineBaseOptions = {
  title: {
    text: '动态折线图示例',
    left: 'center',
    textStyle: {
      fontSize: 20,
      fontWeight: 'bold',
      color: '#333'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line', // 使用直线指示器
      lineStyle: {
        color: '#333',
        width: 1
      }
    },
    formatter: function (params) {
      let tooltipContent = params[0].name + '<br>';
      params.forEach(item => {
        tooltipContent += `${item.seriesName}: ${item.value}<br>`;
      });
      return tooltipContent;
    }
  },
  legend: {
    data: ['系列1', '系列2'],
    right: '10%'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLine: {
      lineStyle: {
        color: '#bd34fe'
      }
    },
    axisLabel: {
      color: '#666',
      fontSize: 14
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#999'
      }
    },
    axisLabel: {
      color: '#666',
      fontSize: 14
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(0, 0, 0, 0.1)'
      }
    }
  },
  series: [
    {
      name: '系列1',
      type: 'line',
      data: [10, 20, 30, 40, 50, 60, 70],
      symbol: 'circle', // 数据点的形状
      symbolSize: 4, // 数据点的大小
      lineStyle: {
        color: 'rgb(97, 151, 206, 0.7)', // 线条颜色
        width: 2 // 线条宽度
      },
      itemStyle: {
        color: 'rgb(102, 153, 204)' // 数据点颜色
      },
      areaStyle: {
        color: 'rgb(227, 235, 255, 0.3)', // 区域填充颜色 75, 192, 192
      }, // 区域填充颜色  rgba(163, 245, 245, 0.3)
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
        }
      }
    },
    {
      name: '系列2',
      type: 'line',
      data: [13, 22, 44, 33, 55, 80, 24],
      symbol: 'circle',
      symbolSize: 4,
      lineStyle: {
        color: 'rgb(102, 153, 0, 0.7)',
        width: 2
      },
      itemStyle: {
        color: 'rgb(102, 153, 0)'
      },
      areaStyle: {
        color: 'rgb(227, 235, 255, 0.3)', // 区域填充颜色 75, 192, 192
      }, // 区域填充颜色  rgba(75, 192, 192, 0.3)
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
        }
      }
    },
  ],
  animation: {
    duration: 1000,
    easing: 'elasticOut'
  }, // 动画效果
};

// 饼图的基础默认配置项
export const pieChartOptions = {
  title: {
    text: '动态饼状图示例',
    left: 'center',
    textStyle: {
      fontSize: 20,
      fontWeight: 'bold',
      color: '#333'
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 10,
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      center: ['50%', '60%'], // 默认居中
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'outside', // outside center
        formatter: '{b}: {d}%' // 标签内容格式器
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      itemStyle: {
        borderRadius: 10, // 圆角
        borderColor: '#fff', // 边框颜色
        borderWidth: 2 // 边框宽度
      }
    }
  ],
  animation: {
    duration: 1000,
    easing: 'elasticOut'
  }, // 动画效果
}


